import { Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { CopyOutlined } from '@ant-design/icons';
import styled from '@emotion/styled';
import { t } from 'i18next';

interface FileSelectProps {
	disabled?: boolean;
	options: { id: number; name: string; title: string }[];
	placeholder?: string;

	changeHandler?: (value: number, option: { value: number; label: string } | Array<{ value: number; label: string }>) => void;
}

const NotFoundContainer = styled.div`
	padding: 10px 0;
	text-align: center;
`;

const NotFountIcon = styled(CopyOutlined)`
	font-size: 26px;
`;

const SelectContainer = styled.div`
	/* padding: 20px 0; */
`;

const FileSelect = (props: FileSelectProps) => {
	const { disabled = false, options = [], placeholder = '', changeHandler } = props;
	const [selectOptions, setSelectOptions] = useState<{ value: number; label: string }[]>([]);

	useEffect(() => {
		setSelectOptions(options.map(item => ({ value: item.id, label: item.title })));
	}, [options]);

	const notFoundView = () => {
		return (
			<NotFoundContainer>
				<NotFountIcon />
				<p>{t('files-empty')}</p>
			</NotFoundContainer>
		);
	};

	return (
		<SelectContainer>
			<p>{t('choose-files')}</p>
			<Select
				getPopupContainer={triggerNode => {
					return triggerNode.parentNode;
				}}
				notFoundContent={notFoundView()}
				style={{ width: '100%' }}
				showSearch={false}
				disabled={disabled}
				options={selectOptions}
				placeholder={placeholder}
				onChange={changeHandler}
			/>
		</SelectContainer>
	);
};

export default FileSelect;
